@name yt {
  @b page {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    transition: all .3s cubic-bezier(.645, .045, .355, 1);
    @e header {
      @when absolute {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
      }
    }

    @e container {
      position: relative;
      flex: 1;
      overflow: hidden;
      height: 100%;
      &::-webkit-scrollbar {
        display: none;
      }

      @when scroll {
        overflow-x: hidden;
        overflow-y: auto;
      }

      @when flex {
        overflow: hidden;
        display: flex;
        flex-direction: column;
      }
    }

    @e mask {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1000;
      transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
      backdrop-filter: blur(10px);
      background-color: rgba(7, 17, 27, 0.1);
    }

    @e more {
      position: absolute;
      top: 76px;
      right: 5px;
      z-index: 2000;
      border-radius: 4px;
      background-color: #ffffff;
      transform-origin: 100% 0 0;
      transition: all .3s cubic-bezier(.645, .045, .355, 1);

      &::before {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        width: 0;
        height: 0;
        border-width: 0 10px 10px;
        border-style: solid;
        border-color: transparent transparent #ffffff;
        transform: translate3d(-50%, -100%, 0);
      }
    }
  }
}
